<template>
  <div>
    <div class="imgBox">
      <div class="title"><div>
        体质测试成绩查询系统</div></div>
    </div>
    <div class="loginBox">

        <van-form class="loginBoxSubmit"  label-width="8rem">
      <van-cell-group inset>
        <van-field
          class="inputBox"
          label-width="3rem"
          v-model="logindata.account"
          label="学号"
          placeholder="请输入学号"
        />
        <van-field
          class="inputBox"
          label-width="3rem"
          v-model="logindata.password"
          type="password"
          label="密码"
          placeholder="请输入密码"
        />
        <div class="forget" @click="SetPasswordShow=true">忘记密码?</div>
      </van-cell-group>
      <div class="loginBtuBox">
        <van-button
          class="loginBtu"
          type="primary"
          size="large"
          @click="submitForm"
          >登录</van-button
        >
      </div>
        </van-form>
    </div>
    <!-- 修改密码 -->
<van-dialog confirm-button-text="复制电话号码" @confirm="copy('0835-2882255')" @cancel="SetPasswordShow=false" :show="SetPasswordShow" title="忘记密码" show-cancel-button  >
   
  <div style="height:4rem;text-align:center;margin-top:0.5rem ;">
    忘记密码请联系王老师
    <p>电话:0835-2882255</p>
  </div>
    
</van-dialog>

  <!-- //选择年份 -->
    <!-- <van-popup :show="showPickerYear" position="bottom">
  <van-picker
  title="选择学年"
  :columns="schoolYear"
  @confirm="onConfirm"
  @cancel="onCancel"
  @change="onChange"
/>
    </van-popup> -->
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { Toast } from "vant";
import { useRouter, useRoute } from "vue-router";
import { SetPassword} from "../request/api";
  import useClipboard from "vue-clipboard3";
import login from "../request/api";
const router = useRouter();
 const {	toClipboard } = useClipboard();
export default defineComponent({
 
  data() {
    return {
      SetPasswordShow:false,
      logindata: {
        account: "",
        password: "",
      },
      // setPssword: {
      //   username: "",
      //   account: "",
      //   password1: "",
      //   password2: "",
      //   idcrad4:""

      // },
       schoolYear : [],
      //  showPickerYear:false,
      //  schoolYearValue:""
    };
  },
  methods: {
    //自动添加年份

    async submitForm() {
      if (this.logindata.account != "" && this.logindata.password != "") {
        login(this.logindata).then((res) => {
          const dataUser=res.data.data
          // console.log(dataUser);
          
          if (res.data.code == 200) {
            Toast.success(res.data.msg);
            localStorage.setItem("token", dataUser.token);
            localStorage.setItem("role", dataUser.user.role);
            localStorage.setItem("account", dataUser.user.account);
            localStorage.setItem("name", dataUser.user.name);
            if (dataUser.user.role == "管理员") {
              setTimeout(() => {
                this.$router.push({
                  path: "/admin",
                  query: {
                    role: dataUser.user.role,
                    account: dataUser.user.account,
                    name: dataUser.user.name,
                 
                  },
                });
              }, 1000);
            } else {
              setTimeout(() => {
                this.$router.push({
                  path: `/student`,
                  query: {
                    // role: dataUser.user.role,
                    account: dataUser.user.account,
                    name: dataUser.user.name,
                    collage:dataUser.user.collage,
                    cls:dataUser.user.cls

                    // schoolYear:this.schoolYearValue
                  },
                });
              }, 1000);
            }
          } else {
          localStorage.removeItem("token")
          localStorage.removeItem("account")
          localStorage.removeItem("name")
          localStorage.removeItem("role")
            Toast.fail(res.data.msg);
          }
        }).catch(err=>{
            Toast.fail("请求超时")
          });
      } else {
        Toast("请输入账号和密码");
      }
    },
    alterPassword(){
    
    
    },
    //复制
   async copy(row){
    // console.log(row);
    	try {
       
					await toClipboard(row)
					Toast.success('复制成功')
          this.SetPasswordShow=false

				} catch (e) {
					Toast.fail(e)
				}
			}
    
    // alterPassword(){
    //   if(this.setPssword.username!==""&&
    //  this.setPssword.account!==""&&
    //   this.setPssword.password1!==""&&
    //   this.setPssword.password2!==""&&
    //   this.setPssword.idLastFour!==""
    // ){
    //     SetPassword(this.setPssword).then(res=>{
    //       // console.log(res);
    //       if(res.data.code==='200'){
    //           Toast.success(res.data.msg)
    //             setTimeout(()=>{
    //               this.SetPasswordShow=false
    //             },500)
              
    //       }else{
    //         Toast.fail(res.data.msg)
    //       }
       
          
    //     }).catch(err=>{
    //         Toast.fail("请求超时")
    //       })
    // }else{
    //   Toast.fail("请填入完整数据")
    // }
    // },
 
  },
  mounted(){
      const nowYear=new Date()
  let nowYearArr:any=nowYear.getFullYear()
  for(let i=2019;i<=nowYearArr;i++){
      this.schoolYear.push(i.toString())
  }
  this.schoolYear.reverse()
  }
});
</script>

<style lang="less" scoped>
.imgBox {
  background: url("../assets/imgs/bg1.png");
  background-size: cover;
  
background-position:50%;
  width: 100%;
  height: 15rem;
  color: white;
  font-weight: 500;
  text-align: center;
  font-size: 1.7rem;
  font-family: "楷体";
  line-height: 2rem;
  // position: relative;
  display: flex;
  justify-content: center; //主轴元素居中
  align-items: center; //侧轴元素居中
  .title {
    // width: 50px;
    // height: 50px;
    // background-color: aqua;
  }
}
.loginBox {
  background: #fff;
  margin-top: -1rem;
  border-radius: 1rem;
  .loginBoxSubmit{
    // background-color: #f4b89e;
    padding: 1.2rem;
    // margin-top: ;  
    }
  .inputBox {
    border-bottom: 0.01rem solid grey !important;
    height: 3rem;
    padding: 1rem;
  }
  .inputBox:nth-child(2) {
    height: 3rem;
  }
  .forget {
    text-align: right;
    margin-top: 0.5rem;
    font-size: 10px;
    margin-right: 0.1rem;
    color: #f4b89e;
    text-decoration: underline #f4b89e;
  }
  .loginBtuBox {
    padding: 1rem;
    .loginBtu {
      border-radius: 1rem;
      background-color: #f4b89e;
      border: none;
      letter-spacing: 0.2rem;
    }
  }
}
</style>
